<template>
  <div>
    <el-dialog title="品牌详情" :visible.sync="dialogVisible" width="65%">
      <el-form ref="form" :inline="true" :model="form" :rules="rules" class="demo-form-inline" label-width="150px">
        <el-form-item label="品牌名称" style="width:45%" prop="name">
          <el-input v-model="form.name " placeholder="品牌名称" size="mini" />
        </el-form-item>
        <el-form-item label="首字母" style="width:45%">
          <el-input v-model="form.firstLetter " placeholder="首字母" size="mini" />
        </el-form-item>
        <el-form-item label="排序" style="width:45%">
          <el-input v-model="form.sort " placeholder="排序" size="mini" />
        </el-form-item>
        <el-form-item label="产品数量" style="width:45%">
          <el-input v-model="form.productCount " placeholder="产品数量" size="mini" />
        </el-form-item>
        <el-form-item label="是否展示" style="width:45%" size="mini">
          <el-switch v-model="form.showStatus" :active-value="1" :inactive-value="0" style="width:300px" />
        </el-form-item>
        <el-form-item label="是否为产品制造商" style="width:45%" size="mini">
          <el-switch v-model="form.factoryStatus " :active-value="1" :inactive-value="0" style="width:300px" />
        </el-form-item>
        <el-form-item label="上传专区大图" style="width:45%" size="mini">
          <el-upload
            class="avatar-uploader"
            :headers="Headers"
            :action="actions"
            :show-file-list="false"
            :on-success="handleBigSuccess"
          >
            <img v-if="form.bigPic" :src="form.bigPic" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
        <el-form-item label="上传LOGO" style="width:45%" size="mini">
          <el-upload
            class="avatar-uploader"
            :headers="Headers"
            :action="actions"
            :show-file-list="false"
            :on-success="handleLogoSuccess"
          >
            <img v-if="form.logo" :src="form.logo" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getToken } from '@/utils/myAuth'
import { addBrand, updateBrand } from '@/api/product/brand'
export default {
  data() {
    return {
      rules: {
        name: [
          { required: true, message: '请输入品牌名称', trigger: 'blur' }
        ]
      },
      dialogVisible: false,
      actions: '/lejuAdmin/material/uploadFileOss',
      form: {
        name: '',
        firstLetter: '',
        sort: '',
        productCount: '',
        showStatus: 1,
        factoryStatus: 1,
        bigPic: '',
        logo: ''
      },
      obj: ''
    }
  },
  computed: {
    Headers() {
      const token = getToken()
      return { token }
    }
  },
  created() {
  },
  methods: {
    open(val) {
      this.obj = val

      if (this.obj) {
        this.form = val
      }
      this.dialogVisible = true
    },
    handleBigSuccess(res, file) {
      if (res.success) {
        this.form.bigPic = res.data.fileUrl
      }
    },
    handleLogoSuccess(res, file) {
      if (res.success) {
        this.form.logo = res.data.fileUrl
      }
    },
    add() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (!this.obj) {
            addBrand({ ...this.form }).then(res => {
              if (res.success) {
                this.dialogVisible = false
                this.$message.success('新增成功')
                this.$emit('success')
                this.form = this.$options.data().form
              } else {
                this.$message.error('新增失败')
              }
            })
          } else {
            updateBrand({ ...this.form }).then(res => {
              if (res.success) {
                this.dialogVisible = false
                this.$message.success('新增成功')
                this.$emit('success')
                this.form = this.$options.data().form
              } else {
                this.$message.error('新增失败')
              }
            })
          }
        } else {
          this.$message.error('请填写必要信息')
          return false
        }
      })
    },
    cancel() {
      this.dialogVisible = false
      this.form = this.$options.data().form
    }
  }
}
</script>
<style lang="scss" scoped>
  .el-input{
    width: 300px;
  }
    .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
